<div ng-show="currentEvent" class="remove-default-padding overflow-ellipsis">
    <script type="text/ng-template" id="popover.html">
        <div class="wrap-text">{{content.value}}</div>
        <hr>
        <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
        <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
    </script>    
    <div class="add-default-padding bordered-div long-vertical-spacing">
        <div ng-if="eventEditable()">
            <textarea class="form-control" rows="3" ng-model="note.value" ng-attr-placeholder="{{'your_note_here'| translate}}"></textarea> 
            <div class="vertical-spacing hideInPrint">
                <button type="button" 
                        class="btn btn-primary"
                        ng-click="addNote()">
                    {{'add'| translate}}
                </button>        
                <button type="button" 
                        class="btn btn-default small-horizontal-spacing hideInPrint"
                        ng-click="clearNote()">
                    {{'clear'| translate}}
                </button>
            </div>
        </div>
        <table class="table table-striped table-bordered dhis2-table-hover table-borderless">
            <tr ng-repeat="note in currentEvent.notes" d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
                <td class="notes-heading-column">
                    <span>{{note.value}}</span>
                </td>
                <td class="notes-date-column">
                    <span class="pull-right">{{note.displayDate}}</span>
                </td>
            </tr>
        </table>
    </div>
</div>
